<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>培训试题</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>

    <style>
        ol, ul, li {
            list-style: none;
        }

        .question {
            margin: 12px 0;
            border-radius: 4px;
            background-color: #ffffff;
            border: solid 1px #f5f5f3;
            /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);*/
            position: relative;
            overflow: visible;
            color: #484848;
            text-align: left;
        }

        .question .q_content {
            padding: 18px 40px 18px 0px;
        }

        .question .q_content .q_title_wrap {
            position: relative;
            padding-left: 22px;
            min-width: 80%;
        }

        .question .q_content .q_title_wrap .q_seq {
            position: absolute;
            left: 10px;
            top: 0px;
            font-size: 15px;
            color: #484848;
            font-weight: bold;
        }

        .survey_main .content_editable {
            box-sizing: border-box;
            border-radius: 2px;
            border: solid 1px transparent;
            color: #484848;
        }

        .question .q_content .q_title_wrap .q_title {
            padding: 6px 10px;
            font-size: 15px;
            width: 400px;

        }

        .question .q_content .q_option_ul {
            padding-right: 184px;
        }

        .question .q_content .q_option_ul > li {
            margin: 10px 0 0;
            padding: 3px 0 0 40px;
            position: relative;
            box-sizing: border-box;
        }

        .question .q_content .q_option_list {
            margin: 6px 0 0 16px;
            padding-left: 20px;
        }

        .lookTitle {
            height: 20px;
            line-height: 20px;
            /* font-size: 20px; */
            font-weight: bold;
        }

        .survey_main .content_editable {
            box-sizing: border-box;
            border-radius: 2px;
            border: solid 1px transparent;
            color: #484848;
        }

        .question .q_content .icon_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: solid 1px #aaaaaa;
            background-color: #ffffff;
            cursor: pointer;
            position: absolute;
            top: 4px;
            left: 8px;
        }

        .question .q_content .icon_active_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            /*background-color: #0076FF;*/
            background: url("/dist/img/duigou2.png") -2px center no-repeat;

            position: absolute;
            top: 4px;
            left: 8px;
        }

        .question .q_content .q_option_ul > li .option_title {
            /*padding: 5px 10px 5px 5px;*/
            font-size: 14px;
            line-height: 1.43;
            min-height: 20px;
            word-wrap: break-word;
        }

        .questionNum {
            font-size: 16px;
            /* padding-top: 5px; */
            width: 20px;
            display: block;
            float: left;
        }

        .cz {
            position: absolute;
            right: 0;
            top: 0;
        }

        .cz div {
            float: left;
            width: 50px;
            text-align: center;
            color: #2b669a;
        }

        .cz .romove {
            color: red;
        }

        html, body, #pdf_viewer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: white;
        }
        .question .q_content .icon_active_check {
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            background: url("/dist/img/duigouCheck.png") -1px center no-repeat;
            position: absolute;
            top: 6px;
            left: 8px;
        }
        .question .q_content .icon_check {
            width: 20px;
            height: 20px;
            border: solid 1px #aaaaaa;
            background-color: #ffffff;
            cursor: pointer;
            position: absolute;
            top: 4px;
            left: 8px;
        }
        .questionType{
            position: absolute;
            top:2px;
            left:-26px;
            font-size: 12px;
        }
    </style>
</head>
<body>
<section class="content" id="app">
    <div class="div-td-content-more"><i></i></div>
    <div class="oaLoad">
        <div class="loadGif" id="areaProgress"></div>
    </div>

    <div class="module question question_focus" v-for="(item,i) in info.questionList">
        <div class="q_content_wrap">
            <div class="q_content">
                <div class="q_title_wrap">
                    <div class="questionType">
                    </div>
                    <div class="q_seq">{{i+1}}、</div>
                    <div class="content_editable editable_focus">
                        <span class="aa q_title"
                              style="width: 80%;height: 20px;line-height:20px;">{{item.content}}</span>
                    </div>
                </div>

                <div class="q_option_list" v-if="item.type==0">
                    <ul class="q_option_ul ui-sortable" style="padding-left: 0px;">
                        <li class="option_item" v-for="(item2,j) in item.optionList">
                            <div class="option_title_wrap">
                                <div class="content_editable ui-sortable-handle" v-if="item2.content">
                                    <i :class="item2.answer == 1?'icon_wj icon_active_radio':'icon_wj icon_radio'"
                                       @click="checkOne(i,j)"></i>
                                    <span class="questionNum">{{changeNum(j)}}、</span>
                                    <span class="aa option_title"
                                          style="width: 60%;margin-left: 5px;border: none;">{{item2.content}}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>


                <div class="q_option_list" v-else>
                    <ul class="q_option_ul ui-sortable" style="padding-top: 10px;padding-left: 0px;">
                        <li class="option_item" v-for="(item2,j) in item.optionList">
                            <div class="option_title_wrap">
                                <div class="content_editable ui-sortable-handle">
                                    <i :class="item2.answer == 1?'icon_wj icon_active_check':'icon_wj icon_check'"
                                       @click="checkBox(i,j)"></i>
                                    <span class="questionNum">{{changeNum(j)}}、</span>
                                    <span class="spanOptionInput" style="font-size: 16px;">{{item2.content}}
                                    </span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div style="height:30px;line-height:30px;text-align: center;z-index:999;padding-top:5px;margin-bottom: 15px">
        <input type="button" value="提交" @click="save()" class="btn oaBtn btn-sm"
               style="margin-top:5px;">
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>

<script>
    function refresh() {
        location.reload();
    }

    var app = new Vue({
        el: '#app',
        data: {
            pageType: $.wyui.page.urlParams.pageType ? $.wyui.page.urlParams.pageType : 'look',//页面类型
            mainAnswer: {
                answer: '',
                fraction: 0,
            },
            userId: getCurrentUser().id,

            info: {
                id: $.wyui.page.urlParams.id ? $.wyui.page.urlParams.id : '',

                questionList: [
                    {
                        "content": "asada",
                        "fraction": 5,
                        "type": 0,
                        "optionList": [
                            {"content": "jkhg", "type": "0", "answer": "0"},
                            {"content": "ddsf", "type": "1", "answer": "0"},
                            {"content": "qweew", "type": "0", "answer": "0"},
                            {"content": "yththn", "type": "0", "answer": "0"}
                        ]
                    }, {
                        "content": "ghbhg",
                        "fraction": 5,
                        "type": 0,
                        "optionList": [
                            {"content": "kjh", "type": "0", "answer": "0"},
                            {"content": "jhkkhj", "type": "0", "answer": "0"},
                            {"content": "sdsfdfd", "type": "1", "answer": "0"},
                            {"content": "km,lk,lk", "type": "0", "answer": "0"}
                        ]
                    }

                ]
            }
        },
        methods: {
            see: function () {
                var that = this;
                top.$.dialog({
                    content: 'url:/page/exam/create.html?mainId=' + that.info.id + '&pageType=' + 'look' + '&goback=' + 0 + '&readResult=readResult',
                    //title: '查看答题',
                    title:'',
                    width: 904,
                    height: 570,
                    max: true,
                    min: true,
                    lock: true,
                });
            },
            changeNum: function (num) {
                var letter = 1;
                switch (num) {
                    case 0:
                        letter = 'A';
                        break;
                    case 1:
                        letter = 'B';
                        break;
                    case 2:
                        letter = 'C';
                        break;
                    case 3:
                        letter = 'D';
                        break;
                    default :
                        break;
                }
                return letter
            },
            addRow: function (i) {
                var that = this;
                var question = {
                    "content": "",
                    "fraction": 5,
                    "type": "0",
                    "optionList": [
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"}
                    ]
                }
                this.info.questionList.splice(i + 1, 0, question);
            },
            delRow: function (i) {
                if (this.info.questionList && this.info.questionList.length > 1) {
                    this.info.questionList.splice(i, 1);
                } else {
                    alert("请保留最少一道题目")
                }
            },
            checkOne: function (i, j) {
                for (var z = 0; z < this.info.questionList[i].optionList.length; z++) {
                    if (z != j) {
                        this.info.questionList[i].optionList[z].answer = "0"
                    } else {
                        if (this.info.questionList[i].optionList[z].answer == "1") {
                            this.info.questionList[i].optionList[z].answer = "0"
                        } else {
                            this.info.questionList[i].optionList[z].answer = "1"
                        }
                    }
                }
            },
            checkBox:function (i,j) {
                if (this.info.questionList[i].optionList[j].answer == "1") {
                    this.info.questionList[i].optionList[j].answer = "0"
                } else {
                    this.info.questionList[i].optionList[j].answer = "1"
                }
            },
            save: function () {
                var that = this;
                for (var i = 0; i < that.info.questionList.length; i++) {
                    var flag = true;
                    for (var j = 0; j < that.info.questionList[i].optionList.length; j++) {
                        if (that.info.questionList[i].optionList[j].answer == '1') {
                            flag = false;
                        }
                    }
                    if (flag) {
                        top.$.alert({
                            win:this,
                            height:220,
                            icon:'3', //1成功 2失败 3提示 不穿代表无图标
                            title:"请回答第" + (i + 1) + "道题",
                            content:'',

                            blankclose: true,//点击空白是否可关闭
                            ok:"确定"
                        })
                        return false;

                    }
                }
                //判断正确与否
                var yn = "";//错误的题
                for (var i = 0; i < that.info.questionList.length; i++) {//题号
                    var flag = true;
                    if (that.info.questionList[i].type==0){
                    for (var j = 0; j < that.info.questionList[i].optionList.length; j++) {//选项号
                            if (1 == that.info.questionList[i].optionList[j].answer) {
                                that.info.questionList[i].answer = j + 1;
                            }
                            if (that.info.questionList[i].optionList[j].answer == that.info.questionList[i].optionList[j].type) {
                                if (that.info.questionList[i].optionList[j].answer == 1) {
                                    flag = false;
                                }
                            }
                        }
                    }else{
                        //拼多选题的正确答案，和自己的答案
                        var anwserDuo="";
                        var typeDuo="";
                        for (var j = 0; j < that.info.questionList[i].optionList.length; j++) {//选项号
                                if (1 == that.info.questionList[i].optionList[j].answer){
                                    anwserDuo=anwserDuo+j
                                }
                            if (1 == that.info.questionList[i].optionList[j].type){
                                typeDuo=typeDuo+j
                            }
                        }
                        if (typeDuo==anwserDuo) {
                            flag = false;
                        }
                    }
                    if (flag) {
                        yn = yn + "" + (i + 1) + ","
                        that.info.questionList[i].tf = 0;// 错误  0
                    } else {
                        that.info.questionList[i].tf = 1;//正确   1
                    }
                }
                if (yn != "") {
                    yn = yn.substring(0, yn.length - 1)
                }
                console.log(yn)
                var fraction = 0.00;
                if (yn == '') {
                    fraction = 100.00;
                } else {
                    fraction = 0.00;
                }
                that.info.userId = that.userId;
                that.info.fraction = fraction;
                $.wyui.postMethod(urlConfig.exam.saveExamDetail, that.info, function (data) {
                    console.log(data)
                    if (yn == '') {
                        top.$.alert({
                            win:this,
                            height:300,
                            icon:'4', //1成功 2失败 3提示 不穿代表无图标
                            title:'恭喜您，培训通过！',
                            content:'',

                            blankclose: true,//点击空白是否可关闭
                            ok:"确定",//是否显示确认按钮,
                            okCallback:function (em,opts) {
                                //确认按钮回调.
                                top.closeTabByPageId("ydst");
                                top.refreshTabByName("培训管理", "no");
                                top.closeTabByPageId("daTi");
                                em.remove()
                                opts.close && opts.close()
                            }
                        })

                    } else {
                        var txt = "请仔细阅读培训材料，再接在励哦";
                        top.$.alert({
                            win:this,
                            height:320,
                            icon:'5', //1成功 2失败 3提示 不穿代表无图标
                            title:'很遗憾，您未通过培训！',
                            content: '<p>' + txt +'</p>',

                            blankclose: true,//点击空白是否可关闭
                            ok:"再次测试",//是否显示确认按钮,
                            okCallback:function (em,opts) {
                                //确认按钮回调
                                refresh();
                                em.remove()
                                opts.close && opts.close()
                            },
                            cancel:"重新阅读",
                            cancelCallback:function (em,opts) {
                                top.refreshTabByName("培训管理", "no");
                                top.closeTabByPageId("daTi");
                                em.remove()
                                opts.close && opts.close()
                            }
                        })

                    }
                })
            }
        },
        mounted: function () {
            var that = this;
            $.wyui.postLoadMethod(urlConfig.exam.getExamDetailByMainId, {
                id: that.info.id,
                userId: that.userId
            }, function (data) {
                that.info = data.main;
            }, false, true);
        }
    })
</script>

</body>
</html>